<template>
	<view class="tabs">
			<u-tabs :list="tabsList" :current="tabCurrent" :scrollable="false" :lineColor="'#16BB5D'" :activeStyle="{ color: '#16BB5D',fontSize:'30rpx',fontWeight:700}" :inactiveStyle="{ color: '#000' ,fontSize:'30rpx'}" :itemStyle="{ height: '100rpx' }" :lineWidth="30" @click="tabsClick">
				<template #right>
					<view class="tab_right" @tap="handleOne">
						<text class="on">日期</text>
						<text class="iconfont icon-a-huaban2fuben11"></text>					
					</view>
				</template>
			</u-tabs>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	const props = defineProps({
		tabCurrent:Number,
		tabsList:Array
	})
	
	const emit = defineEmits(['tabsClick','handleOne'])
	
	const tabsClick=(e)=>{
		emit('tabsClick', e);
	}
	
	const handleOne=(e)=>{
		emit('handleOne', e);
	}
	
	
</script>

<style lang="scss" scoped>
:deep(.u-tabs__wrapper__nav__line){
	bottom: 0;
}
.tab_right{
	box-shadow: 0px 0px 24rpx 0px rgb(0,0,0,0.1);
	width: 60rpx;
	height: 100rpx;
	text-align: center;
	.on{
		font-size: 24rpx;
		color: #666;
	}
	.iconfont{
		font-size: 32rpx;
		color: #666;
		width: 32rpx;
		height: 32rpx;
	}
}
</style>
